<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>用户轨迹</title>
		<link href="../css/mui.css" rel="stylesheet" />
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
			}
			
			#container {
				width: 100%;
				height: 750px;
				overflow-y: hidden;
				background-image: url(../img/lfbg.png);
			}
			
			.taiwan {
				border: solid 1px red;
				color: red;
				text-align: center;
				float: left;
				width: 76px;
				background-color: rgba(255, 0, 0, 0.1)
			}
		</style>
		
	</head>

	<body>
		<header id="header" class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-pull-left"><img src="../img/logo_title.png" height="40px;" style="margin: -10px 0 0 -5px;" /></a>
			<h1 class="mui-title" style="left:110px;">用户轨迹<span id="hUser" style="color: red;"></span></h1>
			<span id="moreUser" onclick="allUser();" style="display: none;" class="mui-icon mui-icon-undo mui-pull-right" ></span>
		</header>
		<div class="mui-content">
			<div id="container">
			</div>
		</div>
	</body>
	<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=94833a63aa7f15adb2b5432a2cba1c8e"></script>
	<script type="text/javascript" src="../js/mui.js" ></script>
	<script>
		mui.plusReady(function(){
			var webview = plus.webview.currentWebview();
			webview.setStyle({
				mask: 'rgba(0,0,0,0.5)'
			});
			mui.openWindow({
				url:'loginOrVerify.html',
				id:'loginOrVerify',
				styles:{
					width:'30%',
					top:'15%',
					bottom:'25%',
					right:'35%'
				},
				extras:{
					type:'0',
					vid:webview.id
				}
			});
		});
		var map = new AMap.Map('container', {
				zoom: 14,
				center: [116.39, 39.9]
			});
			//编辑折线  
			var arr = new Array(); //经纬度坐标数组
			arr.push(new AMap.LngLat("116.368904", "39.913423"));
			arr.push(new AMap.LngLat("116.382122", "39.901176"));
			arr.push(new AMap.LngLat("116.387271", "39.912501"));
			arr.push(new AMap.LngLat("116.398258", "39.904600"));
			//定义折线对象
		
			for (var i = 0; i < arr.length; i++) {
				var content = "<div class = 'taiwan'>移动营销</div>";
					var icon = new AMap.Icon({
						image: '../img/markers_red.png',
						size: new AMap.Size(60, 60)
					});
				var marker = new AMap.Marker({
					icon:icon,
					position: arr[i],
					offset: new AMap.Pixel(18, -65),
					title: "移动营销",
					map: map
				});
				var marker1 = new AMap.Marker({
					content: content,
					position: arr[i],
					offset: new AMap.Pixel(0, 0),
					title: "移动营销",
					map: map
				});
				marker.on('click', markerClick);
				marker.setMap(map);
				marker1.setMap(map);
			}
			
			function markerClick() {
				map.clearMap();
				var l = (arr.length-1);
				var content1 = "<div class = 'taiwan'>起点</div>";
					var icon = new AMap.Icon({
						image: '../img/markers_red.png',
						size: new AMap.Size(60, 60)
					});
				var content2 = "<div class = 'taiwan'>终点</div>";
					var icon = new AMap.Icon({
						image: '../img/markers_red.png',
						size: new AMap.Size(60, 60)
					});
				var marker = new AMap.Marker({
					icon:icon,
					position: arr[0],
					offset: new AMap.Pixel(0, 0),
					title: "起点",
					map: map
				});
				var marker1 = new AMap.Marker({
					content: content1,
					position: arr[0],
					offset: new AMap.Pixel(0, 0),
					title: "移动营销",
					map: map
				});
				var marker2 = new AMap.Marker({
					content: content2,
					position: arr[l],
					offset: new AMap.Pixel(0, 0),
					title: "移动营销",
					map: map
				});
				marker.setMap(map);
				marker1.setMap(map);
				marker2.setMap(map);
				var polyline = new AMap.Polyline({
					path: arr, //设置线覆盖物路径
					strokeColor: "#3366FF", //线颜色
					strokeOpacity: 1, //线透明度
					strokeWeight: 4, //线宽
					strokeStyle: "solid", //线样式
					strokeDasharray: [10, 5] //补充线样式
				});
				polyline.setMap(map);
			}
	</script>

</html>